<template>
  <div>
    <el-row class="top">
      <el-col :span="9" :push="1" style="margin-top: 10px">
        <el-select v-model="cutId" @change="changeState" filterable placeholder="审批状态" style="width: 110px">
          <el-option
             v-for="item in checkTypeList"
             :key="item.cutId"
             :label="item.cutName"
             :value="item.cutId">
          </el-option>
        </el-select>
        <el-select v-model="apprTitle" @change="searchPage" filterable placeholder="审批类型" style="width:200px;margin-left: 20px">
          <el-option
               v-for="item in options"
               :key="item.label"
               :label="item.label"
               :value="item.label">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="2" style="margin-top: 10px">
        <el-button icon="el-icon-refresh" @click="reset">重置</el-button>
      </el-col>
    </el-row>
    <el-row class="tab">
      <el-table :data="tableData" border :default-sort = "{prop: 'apprDate', order: 'descending'}" style="width: 100%" height="420">
        <el-table-column fixed prop="apprId" type="selection"></el-table-column>
        <el-table-column fixed prop="apprReason" label="审批事由">
          <template slot-scope="d">
            <span class="href" v-if="d.row.apprDelete == 1" @click="jump(d.row.apprId)">
              {{d.row.apprReason}}
            </span>
            <span class="href" v-if="d.row.apprDelete == 0" @click="jump(d.row.apprId)">
              业务数据已经被删除，请否决结束</span>
          </template>
        </el-table-column>
        <el-table-column fixed prop="apprTitle" label="类型" width="140"></el-table-column>
        <el-table-column prop="apprDate" sortable label="申请时间" width="120">
          <template slot-scope="s">
            {{ s.row.apprDate | formatDate}}
          </template>
        </el-table-column>
        <el-table-column prop="apply" label="申请人" width="100"></el-table-column>
        <el-table-column prop="approved" label="审批人" width="100"></el-table-column>
        <el-table-column prop="cutName" label="审批状态" width="140"></el-table-column>
        <el-table-column label="操作" width="80">
          <template slot-scope="c">
            <i class="el-icon-top-right" v-if="c.row.apprComplete != 1" title="处理" @click="handle(c.row.apprId,c.row.apprIds,c.row.apprTitle,c.row.apprDelete)" style="cursor: pointer"></i>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页-->
      <div class="limit">
        <el-pagination
          :current-page.sync="currPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalSize"
          @current-change="changePage"
          @size-change="sizeChange">
        </el-pagination>
        <p></p>
      </div>
    </el-row>
    <!-- 处理弹框-->
    <el-dialog title="审批" :visible.sync="dialogFormVisible" width="55%">
      <hr class="border-t-a"/>
      <el-form label-width="100px">
        <el-form-item label="审批意见：">
          <el-input type="textarea" style="width: 560px" v-model="apprView" :rows="2"></el-input>
        </el-form-item>
      </el-form>
      <el-button type="success" @click="updateCheck" style="margin-left: 60px" :disabled="disabledOne">同意，并结束审批</el-button>
      <el-button type="primary" @click="updateTwo" :disabled="disabledTwo">同意，并继续下一个审批人</el-button>
      <el-button type="warning" @click="deleteFalse">否决，并结束审批</el-button>
      <el-button @click="dialogFormVisible = false">取消</el-button>
    </el-dialog>
    <!-- 选择审批人 -->
    <el-dialog title="同意，并继续下一个审批人" :visible.sync="dialogForm" width="55%">
      <hr class="border-t-a"/>
      <el-form label-width="100px">
        <el-form-item label="审批意见：">
          <el-input type="textarea" v-model="apprView" :rows="2"></el-input>
        </el-form-item>
        <el-form-item label="提交审批给：">
          <el-cascader v-model="employeesId" :options="empList" style="width: 610px"
                       :props="{value:'employeesId',children:'children', label: 'empName',expandTrigger: 'hover' }"
                       @change="empChange" :show-all-levels="false"></el-cascader>
        </el-form-item>
      </el-form>
      <el-row>
        <el-col span="2" :push="18">
          <el-button type="primary" @click="define">确定</el-button>
        </el-col>
        <el-col span="2" :push="19">
          <el-button @click="dialogForm = false">取消</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'AsCheck',
  data: function () {
    return {
      tableData: [],
      apprIds:'',       //存储审批id
      apprView:'',      //审批意见
      employeesId:'',   //当前审批人
      checkTypeList: [],//审批类型列表
      empList:[],       //员工列表
      cutId: '',        //审批类型
      apprTitle: '',    //审批名称
      trialId: '',      //需要审批的id
      title: '',        //审批类型
      user: {},         //当前登录用户信息
      empId:'',         //员工id
      dialogFormVisible: false,  //处理弹框
      dialogForm: false,
      disabledOne: false,
      disabledTwo: false,
      //分页
      currPage: 1,     //当前页
      totalSize: 0,    //总条数
      pageSize: 5,     //页大小
      options: [{
        value: '选项1',
        label: '报价审批'
      }, {
        value: '选项2',
        label: '合同审批'
      }, {
        value: '选项3',
        label: '费用报销'
      }, {
        value: '选项4',
        label: '出差申请'
      }]
    }
  },
  created:function() {
    this.user = JSON.parse(sessionStorage.getItem('user'));
    this.empId = this.user.employeesId;//当前登录用户id
    this.initData(this.cutId, this.apprTitle, this.currPage, this.pageSize);

    this.$axios.get("http://localhost:8088/che/check-type"
    ).then(v=>{
      this.checkTypeList = v.data;
    }).catch(v=>{
      alert("访问失败!"+v.data);
    })

    this.$axios.get("http://localhost:8088/exs/check-emp"
    ).then(v=>{
      this.empList = v.data;
    }).catch(v=>{
      alert("访问失败!"+v.data);
    })
  },
  methods: {
    initData(cutId, apprTitle, currPage, pageSize) {
      if(this.empId != undefined && this.empId != '') {
        this.$axios.get("http://localhost:8088/che/check-page",
          {
            params: {
              cutId: cutId,
              apprTitle: apprTitle,
              empId: this.empId,
              currPage: currPage,
              pageSize: pageSize
            }
          }
        ).then(v => {
          this.tableData = v.data.rows;
          this.totalSize = v.data.total;
        }).catch(v => {
          alert("访问失败!" + v.data);
        })
      }
    },
    changePage(currPage) {
      this.initData(this.cutId, this.apprTitle, currPage, this.pageSize);
    },
    changeState() {
      this.initData(this.cutId, this.apprTitle, this.currPage, this.pageSize);
    },
    searchPage() {
      this.initData(this.cutId, this.apprTitle, this.currPage, this.pageSize);
    },
    sizeChange (pageSize) { //改变页大小
      this.pageSize = pageSize;
      this.initData(this.cutId, this.apprTitle, 1, this.pageSize);
    },
    reset(){//重置
      this.cutId = '';
      this.apprTitle = '';
      this.initData(this.cutId, this.apprTitle, this.currPage, this.pageSize);
    },
    jump(apprId){
      this.$router.push({
        path:'/addcheck',
        query:{
          apprId:apprId
        }
      })
    },
    empChange(item) {//获取员工id
      if (this.employeesId != '') {
        this.employeesId = item[1];
      } else {
        this.employeesId = 0;
      }
    },
    handle(apprId,trialId,title,apprDelete){
      this.apprView = '';
      this.employeesId = '';
      this.dialogFormVisible = true;
      this.apprIds = apprId;
      this.trialId = trialId;
      this.title = title;
      if(apprDelete == 0){
        this.disabledOne = true;
        this.disabledTwo = true;
      }
      if(apprDelete == 1){
        this.disabledOne = false;
        this.disabledTwo = false;
      }
    },
    updateCheck(){//同意
      if(this.empId != undefined && this.empId != '') {
        this.$axios.get("http://localhost:8088/che/update-check", {
          params: {
            empId: this.empId,
            apprId: this.apprIds,
            apprView: this.apprView,
            trialId: this.trialId,
            title: this.title
          }
        }).then(v => {
          this.dialogFormVisible = false;
          this.apprView = '';
          this.apprIds = '';
          this.employeesId = '';
          this.empId = '';
          this.initData(this.cutId, this.apprTitle, this.currPage, this.pageSize);
        }).catch(v => {
          alert("访问失败!" + v.data);
        })
      }
    },
    updateTwo(){
      this.dialogFormVisible = false;
      this.dialogForm = true;
    },
    define(){//移至下一个审批人
      if(this.employeesId == '' || this.employeesId == undefined){
        this.$message.error("必须选择审批人");
      }else {
        this.dialogForm = false;
        if(this.empId != undefined && this.empId != '') {
          this.$axios.get("http://localhost:8088/che/deliver-check", {
            params: {
              empId: this.empId,
              apprId: this.apprIds,
              employeesId: this.employeesId,
              apprView: this.apprView,
              trialId: this.trialId,
              title: this.title
            }
          }).then(v => {
            this.dialogFormVisible = false;
            this.apprView = '';
            this.apprIds = '';
            this.employeesId = '';
            this.empId = '';
            this.initData(this.cutId, this.apprTitle, this.currPage, this.pageSize);
          }).catch(v => {
            alert("访问失败!" + v.data);
          })
        }
      }
    },
    deleteFalse(){//否决
      if(this.empId != undefined && this.empId != '') {
        this.$axios.get("http://localhost:8088/che/delete-check",
          {
            params: {
              empId: this.empId,
              apprId: this.apprIds,
              apprView: this.apprView,
              trialId: this.trialId,
              title: this.title
            }
          }
        ).then(v => {
          this.dialogFormVisible = false;
          this.apprView = '';
          this.apprIds = '';
          this.employeesId = '';
          this.empId = '';
          this.initData(this.cutId, this.apprTitle, this.currPage, this.pageSize);
        }).catch(v => {
          alert("访问失败!" + v.data);
        })
      }
    }
  },
  filters: {
    formatDate(time){
      let date   = new Date(time);//把定义的时间赋值进来进行下面的转换
      let year   = date.getFullYear();
      let month  = date.getMonth()+1;
      let day    = date.getDate();
      let hour   = date.getHours();
      let minute = date.getMinutes();
      let second = date.getSeconds();
      return year+"-"+month+"-"+day;
      /*return year+"-"+month+"-"+day+" "+hour+":"+minute+":"+second;*/
    }
  }
}
</script>

<style scoped>
  .top{
    border: 1px solid #D3DCE6;
    width: 100%;
    height: 60px;
    margin-bottom: 10px;
    background: white
  }
  .tab{
    border: 1px solid #D3DCE6;
    padding-bottom: 10px;
    background: white;
    width: 100%;
    overflow: hidden;
  }
  a{
    text-decoration: none;
  }
  .border-t-a {
    border-top: 1px solid #aaaaaa;
    margin-top: -20px;
    margin-bottom: 30px;
  }
  .href{
    color:#009EFB;
    cursor: pointer;
  }
  .limit{
    margin-top:10px;
    margin-left:340px;
  }
</style>
